<template>
  <div class="release-card__wrap">
    <div class="release-card">
<!--      <textarea name="" id="" cols="30" v-model="releaseWord" rows="10" placeholder="哈哈哈，我有个新鲜事要告诉大家～"></textarea>-->
      <auto-textarea ref="vNoteTextarea"
                     placeholder="哈哈哈，我有个新鲜事要告诉大家～"
                     fontSize="14px"
                     minHeight="120px"
                     style=" border:1px solid #EFEFEF;width:768px; background-color: #F4F8FA; border-radius:4px;"
                     backgroundColor="#F9FBFC"
                     lineHeight="1.5" v-model="releaseWord"
      ></auto-textarea>
      <div class="release-card__bottom">
        <div class="bottom__l">
          <div class="func-item">
            <yun-icon name="emoji"  @click.native.stop="showEmojiCard=!showEmojiCard"  size="12px"  color="#00AAE6"></yun-icon>
            <p class="func-item__name"  @click.stop="showEmojiCard=!showEmojiCard">表情</p>

            <transition  name="fade">
            <div class="func-item__abs" v-if="showEmojiCard" ref="emojiCard">
              <div class="header">
                <yun-icon name="close1" size="12px" color="#999" @click.native="showEmojiCard=false"></yun-icon>
              </div>
              <div class="emoji-card" :style="{overflowY:showEmojiScrollBar?'scroll':'hidden'}">
                <div v-for="value in emojiArr" @click="clickToAddEmoji(value)">{{value}}</div>
              </div>
              <div class="footer">
                <div class="footer-l">
                  <p class="item-box" @click="getEmojiArr(1)">😁</p>
                  <p class="item-box" @click="getEmojiArr(2)">🚓</p>
                  <p class="item-box" @click="getEmojiArr(3)">🇨🇳</p>
                  <p class="item-box" @click="getEmojiArr(4)">©</p>
                  <p class="item-box" @click="getEmojiArr(5)">😀</p>
                  <p class="item-box" @click="getEmojiArr(6)">🚂</p>
                  <p class="item-box" @click="getEmojiArr(7)">🌎</p>
                </div>
                <div class="footer-r">
                </div>
              </div>
            </div>
            </transition>

          </div>

          <div class="func-item" @click="showPhotoCard=!showPhotoCard">
            <yun-icon name="img" size="12px"  color="#00AAE6"></yun-icon>
            <p class="func-item__name" >图片</p>
          </div>

          <div class="func-item" @click="showVideoCard=!showVideoCard">
            <yun-icon name="video" size="12px"  color="#00AAE6"></yun-icon>
            <p class="func-item__name" >视频</p>
          </div>

          <div class="func-item">
            <yun-icon name="link" size="12px"  color="#00AAE6"></yun-icon>
            <p class="func-item__name">链接</p>
          </div>

          <div class="func-item">
            <h6>#</h6>
            <p class="func-item__name" @click.stop="showTopicCard=!showTopicCard">话题</p>

            <transition  name="fade">
              <div class="func-item__abs" v-if="showTopicCard" ref="topicCard">
                <yun-input style="border:1px solid #EFEFEF;margin-top:12px" iconName="search" width='270px' @change="dataGetSearchTopic" placeholder="搜索话题" v-model="TopicValue"></yun-input>
                <div class="topic-content">
                  <div class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId"  @click="clickToAddTopic(val.topicId,val.topicName)">
                    <p>#{{val.topicName}}#</p>
                    <h6>{{val.degree}}℉</h6>
                  </div>
                </div>
                <div class="more" @click="clickToOpenPopup">创建新话题</div>
              </div>
            </transition>
          </div>



        </div>
        <div class="bottom__r">
          <div class="select-box" v-if="delayContent">
            <p>该动态将在{{delayTime}}分钟后发布</p>
          </div>

          <p class="send-box" @click="dataPostContent">
            发布
          </p>
        </div>

      </div>
    </div>
    <transition  name="fade">
    <div class="upload-photo-card" v-if="showPhotoCard">
      <div class="header">
        <p>上传图片</p>
        <yun-icon name="close1" size="12px" color="#999" @click.native="showPhotoCard=false"></yun-icon>
      </div>

      <div class="img-container">
        <div @click="clickToDeleteImg(index)" v-for="(value,index) in imgArr" class="img-box" :style="{margin:(index+1)%9===0? '6px 0 0 0':'6px 6px 0 0'}">
          <img :src="value" alt="">
          <div class="img-box-abs">
            <yun-icon name="close1" size="12px" color="#fff"></yun-icon>
          </div>
        </div>
        <div class="add-box" :style="{margin:(imgArr.length+1)%9===0? '6px 0 0 0':'6px 6px 0 0'}">
          <input type="file"  v-if="!addingPic" @change="(e)=>dataPostPic(e)">
          <span v-if="!addingPic">添加图片</span>
          <loading :type=2 v-if="addingPic"></loading>
        </div>
      </div>
    </div>
    </transition>

    <transition  name="fade">
    <div class="upload-video-card" v-if="showVideoCard">
      <div class="header">
        <p>上传视频</p>
        <yun-icon name="close1" size="12px" color="#999" @click.native="showVideoCard=false"></yun-icon>
      </div>

      <div class="video-container">
        <p class="add-box" v-if="!video">
          <span v-if="!showVideoUploadP">上传视频(.mp4 .ogg .webm)</span>
          <input v-if="!showVideoUploadP" type="file"  @change="(e)=>dataPostVideo(e)">
          <loading :type=2 v-if="showVideoUploadP"></loading>
        </p>

        <div class="add-box" v-if="video">
          <video controls :src="video"></video>
          <p class="cancel-video" @click="video=''">取消上传</p>
        </div>
      </div>
    </div>
    </transition>
  </div>

</template>


<script>
  import config from '../../action/config';
  import Loading from '../../components/pc/loading';
  import AutoTextarea from "../common/auto-textarea/src/main";

  export default {
    name:'releaseCard',
    components:{
      Loading,AutoTextarea
    },
    props:{
      initWord:{
        type:String,
        default:''
      }
    },
    data(){
      return {
        releaseWord:'',
        topicsArr:[],
        linksArr:[],
        emojiArr:config.default_data.emojiArrs.emojiArr1,
        showEmojiScrollBar:false,
        showEmojiCard:false,
        showTopicCard:false,
        showPhotoCard:false,
        showVideoCard:false,
        lastPhoto:false,
        addFile:{},
        TopicValue:'',
        imgArr:[
        ],
        video:'',
        showVideoUploadP:false,
        showCoverUploadP:false,
        topicList:[],
        addingPic:false,
        delayTime:0,
        delayContent:false,
      }
    },
    computed:{

    },
    watch:{
      showTopicCard(val){
        if(val===true){
          this.dataGetTopicList();
        }else{
          this.TopicValue = '';
        }
      },
      releaseWord(val){

        let reg =  /delay\([0-9]+\);$/;
        if(reg.test(val)){
          let func = val.match(reg)[0];
          let numReg = /\d+/;
          let num = func.match(numReg)[0];
          this.delayContent = true;
          this.delayTime = Number(num);
        }else{
          this.delayContent = false;
          this.delayTime = 0;
        }
      }

    },
    created(){

      if(process.browser){
        document.addEventListener('click',(e)=>{
          if(this.$refs.topicCard){
            if(!this.$refs.topicCard.contains(e.target)){
              this.showTopicCard = false;
            }
          }
          if(this.$refs.emojiCard){
            if(!this.$refs.emojiCard.contains(e.target)){
              this.showEmojiCard = false;
            }
          }


        })
      }

    },
    methods:{

      getEmojiArr(index){
        let arr = config.default_data.emojiArrs['emojiArr'+index]
        this.showEmojiScrollBar = arr.length > 72;
        this.emojiArr =arr ;
      },
      clickToAddEmoji(value){
        this.releaseWord = this.releaseWord +value
      },
      clickToDeleteImg(index){
        let arr1 = this.imgArr.slice(0,index);
        let arr2 = this.imgArr.slice(index+1)
        this.imgArr = [...arr1,...arr2]
      },
      changeToUploadCover(e){
        //let file = e.target.files[0];

        //上传函数

        this.showCoverUploadP = true;
      },




      clickToOpenPopup(){

        if(this.TopicValue){
          this.$axios.$post(config.api.post.Topic.release,{
            topicName:this.TopicValue
          }).then((res)=>{
            if(res.code===0){
              this.releaseWord = this.releaseWord +"#"+this.TopicValue+"#";
              this.dataGetTopicList();
              this.$message({
                type:'success',
                message:'话题发布成功!'
              })
            }else{
              this.$message({
                type:'info',
                message:res.msg
              })
            }
          })
        }else{
          this.$popupbox({
            title:'发布话题',
            name:'',
            onSubmit: (value,close)=>{
              if(value){
                this.$axios.$post(config.api.post.Topic.release,{
                  topicName:value
                }).then((res)=>{
                  if(res.code===0){
                    this.releaseWord = this.releaseWord +"#"+value+"#";
                    this.dataGetTopicList();
                    close();
                    this.$message({
                      type:'success',
                      message:'话题发布成功!'
                    })
                  }else{
                    this.$message({
                      type:'info',
                      message:res.msg
                    })
                  }
                })
              }else{
                this.$message({
                  type:'info',
                  message:'给话题起个名字吧!'
                })
              }

            }
          })
        }

      },
      dataGetTopicList(){

        this.$axios.$get(config.api.get.Topic.hotSearch,{
          params:{
            page:1,
            size:10
          }
        }).then((response)=>{
          this.topicList = response.data.dataList;
          this.pages = response.data.totalPage;
        })

      },

      dataGetSearchTopic(e){
        this.$axios.$get(config.api.get.Topic.search,{
          params:{
            page:1,
            size:10,
            keywords:e,
          }
        }).then((response)=>{
          this.topicList = response.data.dataList;
          this.pages = response.data.totalPage;
        })
      },

      clickToAddTopic(id,name){
        this.releaseWord = this.releaseWord +"#"+name+"#";
        this.showTopicCard = false;
      },


      dataPostVideo(e){

        if(!this.$store.state.userProfile.userId){
          this.$message({
            type:'warning',
            message:'请先登录！'
          })

          return false;
        }
        let videoStr = /\.(mp4|ogg|webm)$/;
        if(!videoStr.test(e.target.files[0].name)){
          this.$message({
            message:'请上传格式正确的视频!',
            type:'warning'
          })
          return false;
        }
        this.showVideoUploadP=true;
        let a = new FormData();
        let type = 101;
        a.append('file',e.target.files[0]);
        a.append('type',type);
        this.$axios.$post(config.api.post.Resource.file,a).then((res)=>{
          if(res.code === 0){
            this.video =res.data;
          }else{
            this.$message({
              message:res.msg,
              type:'warning'
            })
          }
          this.showVideoUploadP=false;


        })
      },
      dataPostPic(e){
        if(!this.$store.state.userProfile.userId){
          this.$message({
            type:'warning',
            message:'请先登录！'
          })

          return false;
        }
        let a = new FormData();

        let imgStr = /\.(gif|jpg|jpeg|png|bmp|GIF|BMP|JPG|PNG|JPEG)$/;
        if(!imgStr.test(e.target.files[0].name)){
          this.$message({
            message:'文件不是图片类型!',
            type:'warning'
          })
          return false;
        }

        this.addingPic=true;


        let type = 3;
        //0-用户头像
        //1-博客封面
        // 2-项目封面
        a.append('file',e.target.files[0]);
        a.append('type',type);  //0是头像
        this.$axios.$post(config.api.post.Resource.file,a).then((res)=>{
          if(res.code === 0){
            this.imgArr.push(res.data);
          }else{
            this.$message({
              message:res.msg,
              type:'warning'
            })
          }
          this.addingPic=false;


        })
      },
      dataPostContent(){
        if(!this.$store.state.userProfile.userId){
          this.$message({
            type:'warning',
            message:'请先登录！'
          })

          return false;
        }


        if(this.initWord){
          this.releaseWord ='#'+ this.initWord +'#'+this.releaseWord;
        }
        let postFrom = {
          "content": this.releaseWord,
        };


        if(this.imgArr.length>0){
          postFrom.pictures = this.imgArr;
        }
        if(this.video){
          postFrom.video = this.video
        }

        if(!this.releaseWord){
          this.$message({
            type:'warning',
            message:'请输入动态的文字内容！'
          })

          return false;
        }

        if(this.imgArr.length>0&&this.video){
          this.$message({
            type:'warning',
            message:'只能单独上传视频或者图片！'
          })

          return false;
        }


        this.$axios.$post(config.api.post.Post.release,postFrom).then((response)=>{
          if(response.code===0){
            this.$emit(config.event.listenReleaseState,1);
            this.releaseWord = '';
            this.showPhotoCard = false;
            this.showVideoCard = false;
            this.imgArr = [];
            this.$message({
              type:'success',
              message:'动态发表成功！'
            })
          }else{
            this.$message({
              type:'warning',
              message:'动态发表失败！'
            })
          }


        })
      },



    }

  }

</script>


<style lang="scss" scoped>
  .release-card__wrap{
    .release-card{
      box-sizing: border-box;
      width:816*$length;
      height:auto;
      padding:24*$length;
      background-color: #fff;
      & textarea{
        width:768*$length;

        border:1px solid #EFEFEF;
        border-radius:4*$length;
        padding:11*$length 14*$length;
        background-color: #F9FBFC;
        @include fontStyle(14,22,500,#999,start);
        height:120*$length;
      }
      .release-card__bottom{
        @extend %flex-row-spb;
        margin-top:26*$length;
        position: relative;

        .hide-input{
          position: absolute;
          top:0;
          left:0;
          height:0;
          width:0;

        }

        .bottom__l{
          @extend %flex-row-spb;
          justify-content: flex-start;
          .func-item__abs{
            padding:20*$length;
            top:52*$length;
            left:0;
            border-radius:4*$length;
            position:absolute;
            background-color: #fff;
            z-index: 1001;
            box-shadow: 0 6px 20px rgba(0,0,0,.08);
            .header{
              @extend %flex-row-spb;
              justify-content: flex-end;
            }
            .emoji-card{
              margin-top: 10*$length;
              display: grid;
              height:240*$length;
              overflow-y: scroll;
              grid-template-rows: 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length;
              grid-template-columns: 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length 40*$length;
              div{
                border:1px solid #e5e5e5;
                height:40*$length;
                @extend %flex-row-center;
                @extend %cursorPointer;
                &:hover{
                  filter: brightness(130%);
                }
              }
            }
            .footer{
              width:480*$length;
              @extend %flex-row-spb;
              margin-top: 10*$length;
              .footer-l{
                @extend %flex-row-spb;
                justify-content: flex-start;
                .item-box{
                  @extend %cursorPointer;
                  background-color: #00AAE6;
                  border-radius:4*$length;
                  padding:0 10*$length;
                  margin-right: 3*$length;
                  @include fontStyle(12,30,500,#fff,center);
                  @extend %cursorPointer;
                  @extend %animate-transition;
                  &:hover{
                    filter: brightness(130%);
                  }

                }
              }
              .footer-r{
                @extend %flex-row-spb;
                justify-content: flex-start;
                .item-box{
                  border-color: #d9d9d9;
                  background-color: #f2f2f5;
                  width:40*$length;
                  height:40*$length;
                }
              }
            }

            .topic-content{
              margin-top:19*$length;

              .topic-content__c{
                @extend %flex-row-spb;
                @extend %cursorPointer;

                margin-bottom:16*$length;
                p{
                  width:190*$length;
                  @include fontStyle(12,16,500,#333,left);
                  @extend %nowrap;
                  @extend %animate-transition;

                  &:hover{
                    color:#00AAE6
                  }
                }

                h6{
                  @include fontStyle(12,16,500,#ccc,left);
                  @extend %nowrap;
                }
              }
            }
            .more{
              padding:24*$length 0 0;
              @include fontStyle(12,19,500,#333,center);
              @extend %animate-transition;
              @extend %cursorPointer;
              &:hover{
                color:#00AAE6

            }
            }
          }
          .func-item{
            position:relative;
            margin-right:34*$length;
            @extend %flex-row-spb;
            .func-item__name{
               @include fontStyle(14,18,500,#00AAE6,left);
              margin-left:8*$length;
              @extend %cursorPointer;
             }
            h6{
              @include fontStyle(18,18,500,#00AAE6,left);
              @extend %cursorPointer;
            }




          }
        }
        .bottom__r{
          @extend %flex-row-spb;

          .select-box{
            @extend %flex-row-spb;

            p{
              @include fontStyle(12,19,500,#dc8a7d,center);
              margin-right:8*$length;

            }

          }
          .send-box{
            margin-left:20*$length;
            width:100*$length;
            background-color: #00AAE6;
            border-radius:4*$length;
            @include fontStyle(14,40,500,#fff,center);
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              filter: brightness(130%);
            }
          }
        }
      }

    }
    .upload-photo-card{
      box-sizing: border-box;
      margin-top:16*$length;
      width:816*$length;
      padding:24*$length;
      background-color: #fff;
      border-radius: 4*$length;
      .header{
        @extend %flex-row-spb;
        p{
          @include fontStyle(14,19,500,#333,left);
        }
      }
      .img-container{
        @extend %flex-row-spb;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top:18*$length;
        .img-box{
          box-sizing: border-box;
          position:relative;
          width:80*$length;
          height:80*$length;
          border-radius: 4*$length;
          background-color: #F4F8FA54;
          border:1px dashed #dadbff;
          @extend %cursorPointer;
          @include fontStyle(12,80,500,#666,center);
          @extend %flex-row-center;
          & img{
            max-width: 100%;
            max-height: 100%;
          }

          .img-box-abs{
            @extend %animate-transition;
            @extend %cursorPointer;
            opacity: 0;
            &:hover{
              opacity: 1;
            }
            @extend %flex-row-center;
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:100%;
            background-color: rgba(34,34,41,.4);
          }
        }

        .add-box{
          position:relative;
          width:80*$length;
          height:80*$length;
          border-radius: 4*$length;
          background-color: #F4F8FA;
          @extend %cursorPointer;
          @include fontStyle(12,80,500,#666,center);
          & input{
            position:absolute;
            @extend %cursorPointer;
            opacity: 0;
            top:0;
            left:0;
            height:100%;
            width:100%;

          }
        }
      }
    }

    .upload-video-card{
      box-sizing: border-box;
      margin-top:16*$length;
      width:816*$length;
      padding:24*$length;
      background-color: #fff;
      border-radius: 4*$length;
      .header{
        @extend %flex-row-spb;
        p{
          @include fontStyle(14,19,500,#333,left);
        }
      }
      .video-container{
        margin-top:18*$length;
        .add-box{
          position:relative;
          margin-bottom: 20*$length;
          width:448*$length;
          background-color: #F4F8FA54;
          border:1px dashed #dadbff;
          @extend %cursorPointer;
          @include fontStyle(12,252,500,#666,center);
          @extend %flex-row-center;
          & input{
            position:absolute;
            @extend %cursorPointer;
            opacity: 0;
            top:0;
            left:0;
            height:100%;
            width:100%;

          }

          & video {
            width:auto;
            height:auto;
            max-width: 100%;
            max-height:100%;
            background-color:#B9A3D2 ;

          }
          .cancel-video{
            position: absolute;
            left:500*$length;
            top:222*$length;
            width:80*$length;
            @include fontStyle(12,40,500,#666,center);
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              color: #00AAE6
            }
          }
        }
        .video-upload{
          .video-upload__word{
            @extend %flex-row-spb;
            p{
              @include fontStyle(12,16,500,#222,left)
            }
            h6{
              @include fontStyle(12,16,500,#999,center)
            }
          }
          .video-upload__progress{
            margin-top: 6*$length;
            margin-bottom: 20*$length;

            background-color: #EDF5F8;
            height:2*$length;
            p{
              background-color: #75D098;
              height:2*$length;

            }
          }
        }
      }
    }
  }

</style>
